RN: TextInput
テキストフォーム、文字を入力する時に使うやつ
エミュレータ上でキーボードを表示する方法
フォームにフォーカスあたっている状態でcmd-kで表示
props
keyboardType
default
number-pad
数字のみ、暗証番号用とか
https://gyazo.com/8f076060efd231a88e810fc6fd527655
decimal-pad
小数点ありの数字のみ
numeric
ほぼnumber-padと同じだが、左下にドットがある
https://gyazo.com/9cbc5f02642c23a56580395c5797ea26
email-address
「@」「,」「.」などがある
https://gyazo.com/7b8dc7863b1e55778001003e9fde30fd
phone-pad
電話用。「#」「*」などがある
iOSのみのやつ(Androidだと普通の日本語キーボードが表示される)
ascii-capable
https://gyazo.com/8875971d2478b61cd95501537659045f
numbers-and-punctuation
https://gyazo.com/fc9e4c5f326d856ce075e88ec41426d2
url
↓なんかミスってる？本来は「.com」キーがあるらしい
https://gyazo.com/7579804250a47d8166dcf0934776f1fc
name-phone-pad
左下に数字キーボードとの切り替えボタンがある
https://gyazo.com/db778f36170445afd69d4d503ca855ef
twitter
「@」や「#」がある
https://gyazo.com/348742a329d7193e426a904a68e991f6
web-search
↓なんかミスってる？
https://gyazo.com/4e22dccc4b7713cca00a852a9b73a85f
onSubmitEditing
キーボード右下の「完了」のようなreturn keyを押した時に発火する
returnKeyType
return keyを押したときの挙動？見た目だけ？を設定する
nextにすると↓のように「次へ」になっている
ただ、このままでは押しても次のフォームへ行くわけではなく、何も起きない
実際に次のフォームに移動するためにはuseRefなどを使う
https://gyazo.com/9adf645ecc290cbd47751a8c484ec72f
それ以外のものは、以下のように文言が変わり、押すとキーボードが閉じる
done→「完了」
go→「完了」
search→「検索」
send→「送信」
numberOfLines
multiline={ture}にしておく
たぶんiOSでは効かない
これをtrueにした時、AndroidとiOSで若干見た目が異なるので注意
Android
複数行textareaの見た目でカーソルが中央部分にある
↓これは改行しているわけではない。最初からこの位置にカーソルがある
style={{ textAlignVertical: 'top' }}を指定すると直る
https://gyazo.com/d3a7ff350b40fbccda77af4181380dcd
iOS
一行のinputの見た目でカーソルが一番上にある
https://gyazo.com/53ee961b409c1b68e2d9f195ea125bd8